<template>
    <div>
        <div class="head" style="height:50px">
            <div class='header-wrap'>
                <div class='wrap-left'>
                    <i class='el-icon-location-outline' style="color:#007bff;margin:0 10px;"></i>
                    <el-select v-model="value" placeholder="更换城市">
                        <el-option-group
                        v-for="group in options"
                        :key="group.label"
                        :label="group.label">
                            <el-option
                                v-for="item in group.options"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value">
                            </el-option>
                        </el-option-group>
                    </el-select>              
                    <!-- <button class='changeCity'><a>更换城市</a></button> -->
                    <div class="user-entry" v-if="this.userIds == null">
                        <router-link to='/login' class='user-up'>登录</router-link>                        
                        <router-link to="/login" class="extra-entry">注册</router-link>                       
                    </div>
                    <div class='listed' v-if="this.userIds != null">
                        <router-link to="/personal" class='user-up'>{{this.username}}</router-link>
                        <button  class='extra-entry' @click='loginOut'>退出</button>
                    </div>
                </div>
                <div class='wrap-right'>
                    <ul class='right-ul'>
                        <li><router-link to="/"><i class="el-icon-guide"></i>首页</router-link></li>
                        <li><router-link :to="`/dining/美食`"><i class="el-icon-fork-spoon"></i>美食</router-link></li>
                        <li>
                            <router-link :to="`/hotel/2`"><i class="el-icon-goblet"></i>酒店</router-link> 
                        </li>
                        <li><i class="el-icon-bicycle"></i>出行</li>
                        <li><i class="el-icon-s-shop"></i>娱乐</li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
import {out} from '../../../api/commonReq/front/index/data'
export default {
    name:'Header',
    data() {
        return {
            city:[
                '北京','重庆','大连','东莞','福州','佛山','广州','贵阳','杭州','黄山','海阳','济南','昆明','西安','郑州','新乡','周口','洛阳','南阳',
                '石河子','平顶山','吉林','建德','哈尔滨','鹤壁','黑河','广安','阜新','分宜','峨眉','大风','澳门','长兴','从化','成安','巴州'
                ],
            options: [{
                label: '热门城市',
                options: [{
                    value: 'Shanghai',
                    label: '上海'
                }, {
                    value: 'Beijing',
                    label: '北京'
                }]
                }, {
                label: '城市名',
                options: [{
                    value: 'Chengdu',
                    label: '成都'
                }, {
                    value: 'Shenzhen',
                    label: '深圳'
                }, {
                    value: 'Guangzhou',
                    label: '广州'
                }, {
                    value: 'Dalian',
                    label: '大连'
                }]
            }],
            value: '',
            userIds:null ,  
            userName:null
        }
    },
    mounted(){
        if(this.$store.state.store.userMsg == null){
            this.userIds='';
            this.username =''
        }else{
            this.userIds = this.$store.state.store.userMsg.userId;
            this.username =  this.$store.state.store.userMsg.userNickname
        }
        // console.log(96969696969696);
        // console.log(this.$store.state.store);
        // console.log(this.$store.state.store.userMsg);
      
        // console.log(888888888);
        // console.log(this.userIds);
        // console.log(this.username);
    },
    methods:{
        //    退出登录
        // loginOut(){
        //     this.$confirm('是否确定退出登录?', '提示', {
        //         confirmButtonText: '确定',
        //         cancelButtonText: '取消',
        //         type: 'warning'
        //     }).then(() => {
        //         this.$http({
        //             url:'/shops/login_and_register/basic/logout',
        //             method:'POST',
        //             headers:{
        //                 'Authorization':cookie.getToken()
        //             }
        //         }).then(data => {
        //             if(data.data.code === 200){
        //                 this.$message({
        //                     type: 'success',
        //                     message: '退出成功!'
        //                 });
        //                 this.$router.push({ name:'login' })
        //                 cookie.removeToken()
        //             }
        //         }).catch(err => {
        //             console.log(err);
        //         })
        //     }).catch(() => {
        //         this.$message({
        //             type: 'info',
        //             message: '已取消退出'
        //         });          
        //     });
        // }
          //    退出登录
        loginOut(){
            this.$confirm('是否确定退出登录?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                out().then(data=>{
                    console.log(data);
                    if(data.data.code === 200){
                        this.$message({
                            type: 'success',
                            message: '退出成功!'
                        });
                        this.$router.push({ name:'login' })
                        // cookie.removeToken()
                    }
                })
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消退出'
                });          
            });
        }
    }
}
</script>
<style lang="less" scoped>
    // 跟换城市的样式
    .el-dropdown-link {
        cursor: pointer;
        color:#666;
        border: 1px solid black;
       
    }
    .el-icon-arrow-down {
        font-size: 12px;
    }
    .demonstration {
        display: block;
        color: #8492a6;
        font-size: 14px;
        margin-bottom: 20px;
    }
    .head{
        /* width: 100%; */
        background-color: #F8F8F8;
        margin: 0 auto;
       
    }
    .header-wrap{
        margin: 0 auto;
        height: 48px;
        width: 94%;
        display: flex;
        line-height: 48px;
        justify-content: space-between;
    }
    .wrap-left{
        display: flex;
    }
    .wrap-left i{
        font-size: 20px;
        color: red;
        line-height: 46px;
    }
    .cityName{
        color:#666;
        font-size: 14px;
        cursor: pointer;
    }
    .changeCity{
        outline: none;
        border: 1px solid #E5E5E5;
        border-radius: 2px;
        background: transparent;
        margin: 0 4px;
        padding: 0 2px;
        cursor: pointer;
    }
    .changeCity a{
        text-decoration: none;
        color: #666;
        font-size: 14px;
        cursor: pointer;
    }
    .changeCity a:hover{
        color:#007bff;
    }
    .user-entry{
        display: inline-block;
        margin-left: 15px;
    }
    .user-entry a,.listed a{
        text-decoration: none;
        font-size: 14px; 
        cursor: pointer;
    }
    .user-up{
        color:#007bff;
        margin-right: 10px;
    }
    .extra-entry{
        color: #666;
        outline: none;
        border: none;
    }
    .listed{
        margin-left: 15px;
    }

    .right-ul{
        display: flex;
        list-style: none;
    }
    .right-ul li{
        padding-right: 15px;
        color: #666;
    }
    .right-ul li a:hover{
        color:#007bff;
        cursor: pointer;
    }
    .right-ul li a{
        text-decoration: none;
        color:#666;
    }
    .right-ul li i{
        color: #007bff;
        margin-right: 8px;
    }
</style>